import template from './template/index.pug'
import './index.less'
import L from 'leaflet'
import $ from 'jquery'


export default {
    template,
    computed: {},
    data() {
        return {
            prjList: [],
            freqList: {},
            typeList: {},
            lineList: {},
            curType: '',
            curLine: '',
            curPrjList: [],
            map: {},
            curLayers: {},
            searchWords: '',
            searchdrop: false,
            searchList: []
        }
    },
    watch: {
        curPrjList: function (val, oldVal) {
            let lats = [],
                lngs = [],
                newCenter = [];
            val.forEach(prj => {
                lats.push(prj.center.lat);
                lngs.push(prj.center.lng);
            });
            newCenter = [(Math.max(...lats) + Math.min(...lats)) / 2, (Math.max(...lngs) + Math.min(...lngs)) / 2];
            if (this.curLayers) {
                this.map.removeLayer(this.curLayers);
            }
            this.curLayers = this.markerLayer(this.map, val)
            this.map.addLayer(this.curLayers);
            this.map.panTo(newCenter);
        }
    },
    methods: {
        // some methods here
        async getLineList() {
            var cityList = await $.get('./prjList');
            return cityList[0].lines;
        },
        groupBy(array, key) {
            return array.reduce(function (acc, cur) {
                (acc[cur[key]] = acc[cur[key]] || []).push(cur);
                return acc;
            }, {});
        },
        filter() {
            let filter = {
                curLine: 'lineName',
                curType: 'monitorTypes'
            }
            this.curPrjList = this.prjList.filter(prj => {
                return Object.keys(filter).every(key => {
                    if (this[key] === '') return true;
                    return (key === 'curType' ? prj[filter[key]].toString() === this[key] : prj[filter[key]] === this[key]);
                })
            });
            console.log(this.curPrjList);
        },
        initMap() {
            let map = L.map('map', {
                center: [31.1881336, 121.4737701],
                zoom: 13,
                maxZoom: 18,
                minZoom: 5,
                zoomControl: false,
                attributionControl: false,
                scrollWheelZoom: false
            });
            L.control.zoom({ zoomInTitle: '放大', zoomOutTitle: '缩小', position: 'bottomleft' }).addTo(map);
            L.tileLayer('http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
                attribution: '',
                detectRetina: true,
                reuseTiles: true
            }).addTo(map);
            return map;
        },
        markerLayer(map, prjList) {
            let layers = [];
            prjList.forEach(prj => {
                let popup = `<div>
                <table class='mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp'>
                    <tbody>
                        <tr>
                            <td class='mdl-data-table__cell--non-numic' style='width:75px;'>项目名称</td>
                            <td style='white-space:nowrap; text-overflow:ellipsis; overflow:hidden;' title='${prj.name}'>${prj.name}</td>
                        </tr>
                        <tr>
                            <td>所属线路</td>
                            <td>${prj.lineName}</td>
                        </tr>
                        <tr>
                            <td>隧道类型</td>
                            <td>${prj.tunnelType}</td>
                        </tr>
                        <tr>
                            <td>监测频率</td>
                            <td>${prj.frequency}天</td>
                        </tr>
                        <tr>
                            <td>监测类型</td>
                            <td>${prj.monitorTypes}</td>
                        </tr>
                    </tbody>
                </table>
            </div>`;
                let marker = L.marker([prj.center.lat, prj.center.lng], {

                })
                    .bindPopup(popup);
                layers.push(marker);
            });
            return L.layerGroup(layers);
        },
        search() {
            this.curPrjList = this.prjList;
            let filterList = [];
            if (this.searchWords) {
                this.searchdrop = true;
                filterList = this.prjList.filter(prj => { return prj.name.indexOf(this.searchWords) >= 0 });
                this.searchList = filterList;
            }
            console.log(this.searchList);
        },
        gotoPrj(prj) {
            this.map.panTo(prj.center);
            L.popup()
                .setLatLng(prj.center)
                .setContent(`<p>${prj.name}</p>`)
                .openOn(this.map);
        }
    },
    created() {
        console.log('----created----');
        console.log(this);
    },
    beforeMount() {
        console.log('---before mounted ---');
        console.log(this.$el);
    },
    async mounted() {
        console.log('---mounted ---');
        console.log(this.$el);
        let lineLists = await this.getLineList();
        lineLists.forEach(line => {
            this.prjList = this.prjList.concat(line.projects);
        });
        console.log(this.prjList);

        //按照频率和监测类型goupby
        this.freqList = this.groupBy(this.prjList, 'frequency');
        this.typeList = this.groupBy(this.prjList, 'monitorTypes');
        this.lineList = this.groupBy(this.prjList, 'lineName');

        console.log(this.freqList);
        console.log(this.typeList);
        console.log(this.lineList);

        // 筛选项目
        this.curPrjList = this.prjList;
        
        $('#prjMap').height($('body').height() - 72);

        this.map = this.initMap();
        this.curLayers = this.markerLayer(this.map, this.curPrjList);
        this.map.addLayer(this.curLayers);

    }

}